<template>
    <div>
        <van-row class="editor-box-tit background-fff">
            <van-col span="8">
                <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
            </van-col>
            <van-col span="8" class="text-align-c color-3 font-34 font-bold">
                优惠券
            </van-col>
            <van-col span="8" class="text-align-r color-3 font-2">
                <!-- <span class="wancheng" @click="dialogYhq = true">兑换</span> -->
            </van-col>
        </van-row>
        <ul class="service-box">
            <li class="service-box-li clearfix" v-if="yhqList.length > 0" v-for="(item,index) in yhqList" :key="index">
                <div class="fl li-left-box clearfix">
                    <span class="span1 text-align-c">
                        <em class="font-24 position-b">￥</em>
                        <em class="font-bold font-6">{{item.coupon.price}}</em>
                    </span>
                    <span class="span2 text-align-c font-2">满{{item.coupon.validScope}}元可用</span>
                </div>
                <!-- right-box4 -->
                <div class="fr li-right-box clearfix right-box4" v-if="item.coupon.startTime>currentTime">
                    <span class="color-3 font-3 span3">{{item.coupon.title}}</span>
                    <span class="color-9 font-2 span4">{{item.coupon.startTimeStr}}~{{item.coupon.endTimeStr}}</span>
                </div>
                <!-- right-box1 -->
                <div class="fr li-right-box clearfix" v-else-if="item.status == 0"> 
                    <span class="color-3 font-3 span3">{{item.coupon.title}}</span>
                    <span class="color-9 font-2 span4">{{item.coupon.startTimeStr}}~{{item.coupon.endTimeStr}}</span>
                </div>
                <!-- right-box2 -->
                <div class="fr li-right-box clearfix right-box2" v-else-if="item.status == 1">
                    <span class="color-3 font-3 span3">{{item.coupon.title}}</span>
                    <span class="color-9 font-2 span4">{{item.coupon.startTimeStr}}~{{item.coupon.endTimeStr}}</span>
                </div>
                <!-- right-box3 -->
                <div class="fr li-right-box clearfix right-box3" v-else-if="item.status == 2">
                    <span class="color-3 font-3 span3">{{item.coupon.title}}</span>
                    <span class="color-9 font-2 span4">{{item.coupon.startTimeStr}}~{{item.coupon.endTimeStr}}</span>
                </div>
                
            </li>
            <li v-if="nullData" class="arrayNull">暂无优惠券</li>
        </ul>
        <!-- <van-tabbar>
            <span class="fabu-dynamic text-align-c">领取更多优惠券</span>
        </van-tabbar> -->
        <van-dialog v-model="dialogYhq" show-cancel-button :before-close="beforeClose" :close-on-click-overlay="true">
            <span class="dhm text-align-c">请输入您的兑换码</span>
            <van-field v-model="yhqMa" placeholder="请输入兑换码" />
        </van-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            active:0,
            dialogYhq: false,
            yhqMa:'',
            yhqList:[],
            nullData:false,
            currentTime:new Date().getTime()
        }
    },
    created(){
       //console.log(this.currentTime)
    },
    mounted(){
        this.couponsList()
    },
    methods:{
        beforeClose(action, done){
            if (action === 'confirm') {
                setTimeout(done, 1000)
            } else {
                done()
            }
        },
        // 优惠券列表
        couponsList(){
            apiHttp.apiCenter.listByUserAndGroupCode('',resp=>{               
                if(resp.code == 200){
                    this.yhqList = resp.data.content
                    if(this.yhqList.length==0){
                        this.nullData = true;
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.editor-box-tit{
    border-bottom: 0.04rem solid #eeeeee;
}
.position-b{
   position: relative;
   bottom: 0.2rem;
}
.service-box{
    padding: 0 1rem .6rem 1rem;
}
.service-box-li{
   margin-top: .6rem;
   box-shadow: #e8e4e4 0 0 .6rem;
   border-radius: .2rem;
}
.li-left-box{
    width: 30%;
    border-right:solid .04rem #f5f5f5;
    margin:.4rem 0
}
.span1{
    height: 1.8rem;
    line-height: 2.4rem;
    overflow: hidden;
    display: block;
    font-size: .8rem;
    color: #D84E4D;
    margin-bottom: 0.2rem;
}
.span2{
    height: 1.2rem;
    line-height: .8rem;
    overflow: hidden;
    display: block;
    color: #D84E4D;
}
.li-right-box{
    width: 65%;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 22%;
    padding: .4rem 0 .3rem 0;
}
.right-box1{
    background-image: url(../../assets/image/center/img_1.png);
}
.right-box2{
    background-image: url(../../assets/image/center/img_2.png);
}
.right-box3{
    background-image: url(../../assets/image/center/img_3.png);
}
.right-box4{
    background-image: url(../../assets/image/center/img_4.png);
}
.li-right-box span{
    display: block;
}
.span3{
    height: 1.6rem;
    line-height: 2.4rem;
    overflow: hidden; 
    padding-bottom:.3rem;
}
.span4{
    height: 1.3rem;
    line-height: .8rem;
    overflow: hidden;
}
.van-dialog{
    width: 65%;
    border-radius:.4rem;
}
.dhm{
    height: 2rem;
    display: block;
    line-height: 2rem;
}
</style>

